<template>
  <el-drawer
    v-if="detailDrawer"
    v-model="detailDrawer"
    custom-class="myDrawer"
    title="产品终端价详情"
    direction="rtl"
    :destroy-on-close="true"
    :append-to-body="false"
    :size="sizeWidth"
  >
    <template #title>
      <div class="drawer-title">
        <div class="title-left">
          <h2 style="font-size: 16px;">
            <slot
              v-if="customTitle"
              name="title"
            />
            <span v-else> {{ title }} </span>
          </h2>
          <div class="title-status">
            <slot name="status" />
          </div>
        </div>
        <div class="title-right">
          <slot name="right" />
        </div>
      </div>
    </template>
    <template #default>
      <slot name="contents" />
    </template>
  </el-drawer>
</template>

<script>
import {ref, toRefs} from 'vue'

export default {
  props: {
    title: {
      type: String,
      default: '详情标题',
    },
    customTitle: {
      type: Boolean,
      default: false,
    },
    sizeWidth: {
      type: Number,
      default: 1000,
    },
  },
  setup(props, context) {
    var detailDrawer = ref(false)
    const open = () => {
      detailDrawer.value = true
    }
    const close = () => {
      detailDrawer.value = false
    }
    return {
      ...toRefs(props),
      detailDrawer,
      open,
      close,
    }
  },
}
</script>

<style>
</style>
